<template>
  <div class="wrap">
    <SkyCardPanel title="文字提示">
      <div slot="main">
        <div class="box">
          <div class="top">
            <sky-tooltip class="item" effect="dark" placement="top-start">
              <div class="content" slot="content" style="width: 100px">
                Top Left 提示文字
              </div>
              <sky-button>上左</sky-button>
            </sky-tooltip>
            <sky-tooltip class="item" effect="dark" placement="top">
              <div class="content" slot="content" style="width: 100px">
                Top center 提示文字
              </div>
              <sky-button>上边</sky-button>
            </sky-tooltip>
            <sky-tooltip class="item" effect="dark" placement="top-end">
              <div class="content" slot="content" style="width: 100px">
                Top right 提示文字
              </div>
              <sky-button>上右</sky-button>
            </sky-tooltip>
          </div>
          <div class="left">
            <sky-tooltip
              class="item"
              effect="dark"
              content="Left Top 提示文字"
              placement="left-start"
            >
              <sky-button>左上</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Left Center 提示文字"
              placement="left"
            >
              <sky-button>左边</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Left Bottom 提示文字"
              placement="left-end"
            >
              <sky-button>左下</sky-button>
            </sky-tooltip>
          </div>

          <div class="right">
            <sky-tooltip
              class="item"
              effect="dark"
              content="Right Top 提示文字"
              placement="right-start"
            >
              <sky-button>右上</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Right Center 提示文字"
              placement="right"
            >
              <sky-button>右边</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Right Bottom 提示文字"
              placement="right-end"
            >
              <sky-button>右下</sky-button>
            </sky-tooltip>
          </div>
          <div class="bottom">
            <sky-tooltip
              class="item"
              effect="dark"
              content="Bottom Left 提示文字"
              placement="bottom-start"
            >
              <sky-button>下左</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Bottom Center 提示文字"
              placement="bottom"
            >
              <sky-button>下边</sky-button>
            </sky-tooltip>
            <sky-tooltip
              class="item"
              effect="dark"
              content="Bottom Right 提示文字"
              placement="bottom-end"
            >
              <sky-button>下右</sky-button>
            </sky-tooltip>
          </div>
        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
       &lt;sky-tooltip class="item" effect="dark" placement="top-start"&gt;
          &lt;div class="content" slot="content"  style="width:100px"&gt;Top Left 提示文字&lt;/div&gt;
          &lt;sky-button type="primary"&gt;上左&lt;/sky-button&gt;
        &lt;/sky-tooltip&gt;

         &lt;sky-tooltip class="item" effect="dark" placement="top"&gt;
          &lt;div class="content" slot="content"  style="width:100px"&gt;Top center 提示文字&lt;/div&gt;
          &lt;sky-button type="primary"&gt;上中&lt;/sky-button&gt;
        &lt;/sky-tooltip&gt;

         &lt;sky-tooltip class="item" effect="dark" placement="top-end"&gt;
          &lt;div class="content" slot="content"  style="width:100px"&gt;Top Right 提示文字&lt;/div&gt;
          &lt;sky-button type="primary"&gt;上右&lt;/sky-button&gt;
        &lt;/sky-tooltip&gt;

         &lt;sky-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start"&gt;
              &lt;sky-button&gt;左上&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Left 提示文字" placement="left"&gt;
              &lt;sky-button&gt;左中&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end"&gt;
              &lt;sky-button&gt;左下&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start"&gt;
              &lt;sky-button&gt;右上&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Right 提示文字" placement="right"&gt;
              &lt;sky-button&gt;右中&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end"&gt;
              &lt;sky-button&gt;右下&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

           &lt;sky-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="right-start"&gt;
              &lt;sky-button&gt;下左&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Bottom 提示文字" placement="right"&gt;
              &lt;sky-button&gt;下右&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;

          &lt;sky-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end"&gt;
              &lt;sky-button&gt;下右&lt;/sky-button&gt;
          &lt;/sky-tooltip&gt;
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
            export default {
              methods: {}
            };
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style lang="scss" scoped>
.Tooltip-Demo-Page {
  & /deep/ .card-main {
    padding: 20px !important;
  }
}
.box {
  width: 400px;
  margin: 0px auto;
  padding: 20px 0px; 
  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 88px;
  }

  .right {
    float: right;
    width: 88px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
    display: inline-block;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}
</style>